<template>
    <div>
        <el-row>
            <el-col :span="6" style="text-align: right;">
                <el-tabs :tab-position="tabPosition" style="height: 200px;" @tab-click="handleClick">
                    <el-tab-pane label="技术员" name="1"></el-tab-pane>
                    <el-tab-pane label="管理员" name="2"></el-tab-pane>
                    <el-tab-pane label="经理" name="3"></el-tab-pane>
                    <el-tab-pane label="临时工" name="4"></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="18" style="text-align:left;">
                <div>
                    <el-button @click="eventSelectedAll">全选</el-button>
                    <el-button @click="eventSelectedTrun">反选</el-button>
                    <el-button @click="eventSava">保存</el-button>
                </div>
                <el-tree :data="data" ref="tree" show-checkbox node-key="id" :default-expand-all="true"
                    :props="defaultProps">
                </el-tree>
            </el-col>
        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
            tabPosition: 'left',
            data: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id'
            },
            selectedAllId: [],
            roleid:0,
        };
    },
    mounted() {
        this.onLoadMenu()
    },
    methods: {
        //tabs的单击事件
        handleClick(tab, event) {
            console.log(tab, event);
            //在这个事件中，可以获取对应的角色ID
            this.roleid = tab.name
        },
        //保存角色对应的菜单
        eventSava() {

            let url = 'http://localhost:5148/rbac/user/add/menu'
            let data = this.$refs.tree.getCheckedKeys()
            this.$http.post(url, data, {
                params: {
                    roleid: this.roleid
                }
            }).then(res => {
                console.log(res)
            })

        },
        //反选按钮事件
        eventSelectedTrun() {
            //第一：先拿到选中的key
            let selectedId = this.$refs.tree.getCheckedKeys()
            //第二：从所有的id中，去掉选中的，
            //笨方法
            // let newSelectedId=[]
            // this.selectedAllId.forEach(x=>{
            //     let i=0                
            //     selectedId.forEach(y=>{                    
            //         if(x==y){
            //             i++
            //         }
            //     })
            //     if(i==0){
            //         newSelectedId.push(x)
            //     }
            // })
            // console.log(newSelectedId)

            //简写方法
            let d = this.selectedAllId.filter((x) => {
                return selectedId.indexOf(x) === -1
            })
            this.$refs.tree.setCheckedKeys(d);
        },
        //全选按钮事件
        eventSelectedAll() {
            this.$refs.tree.setCheckedKeys(this.selectedAllId);
        },
        //加载菜单树
        onLoadMenu() {
            let url = 'http://localhost:5148/rbac/user/menus'
            this.$http.get(url).then(res => {
                this.data = res.data

                this.data.forEach(x => {
                    this.selectedAllId.push(x.id)
                })
            })
        }
    }
};
</script>